<!--
 * @Author       : ly
 * @Date         : 2021-07-05 11:50:49
 * @LastEditors  : ly
 * @Description  : 描述
-->
<template>
  <a-form-model
    ref="dialogForm"
    :model="dialogForm"
    layout="vertical"
    class="formModel"
  >
    <a-upload
      name="avatar"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :customRequest="uploadAvatar"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <div class="uploadDialog">
        <img
          ref="upImg"
          class="imageUrl"
          v-if="imageUrl"
          :src="imageUrl"
          alt=""
        />
        <template v-else>
          <div class="addicon">
            <img src="@/assets/img/add.png" alt="" />
            <span>上传图片</span>
          </div>
          <div class="tips">
            请上传jpg、jpeg、png等格式图片，大小不超过2M，头像尺寸限定150x150px
          </div>
        </template>
      </div>
    </a-upload>
    <!-- <div class="avatarTranForm">
      <span @click="imageUrl = ''">重新上传</span>
      <div class="iconop">
        <img
          @click="handleImg('scale')"
          src="@/assets/img/tranform.png"
          alt=""
        />
        <img
          @click="handleImg('reduce')"
          src="@/assets/img/tranform2.png"
          alt=""
        />
        <img
          @click="handleImg('rotate')"
          src="@/assets/img/tranform3.png"
          alt=""
        />
      </div>
    </div> -->
  </a-form-model>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { uploadUserAvatar } from '@/services/access/user'
  function getBase64(img, callback) {
    const reader = new FileReader()
    reader.addEventListener('load', () => callback(reader.result))
    reader.readAsDataURL(img)
  }
  export default {
    data() {
      return {
        dialogForm: {
          name: undefined,
          account: undefined,
        },
        loading: false,
        imageUrl: '',
        imgType: '', //上传的图片类型
        imgStr: '', //上传的不包含图片头的(data:image/jpg;base64,)
        scale: 1, //图片的初始比例
        rotate: 0, //图片的初始旋转角度

        avatarURL: require('@/assets/img/defaultAdmin.png'),
        editAvatarDialog: false,
        previews: {},
        option: {
          img: require('@/assets/img/defaultAdmin.png'), // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 1, // 剪切后的图片质量（0.1-1）
          full: true, // 输出原图比例截图 props名full
          outputType: 'png', // 裁剪生成额图片的格式
          canMove: true, // 能否拖动图片
          original: false, // 上传图片是否显示原始宽高
          canMoveBox: true, // 能否拖动截图框
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 150,
          autoCropHeight: 150,
          fixedBox: true, // 截图框固定大小
        },
      }
    },

    computed: {
      ...mapGetters('account', ['user']),
    },
    mounted() {},
    methods: {
      // rowData, visible
      onSubmit() {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            uploadUserAvatar({
              companyID: this.user.companyID,
              userID: this.user.subjectID,
              content: this.imgStr,
              extension: this.imgType,
            }).then(() => {
              this.$message.success('上传成功')
              this.$emit('close-modal')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      resetForm() {
        this.$refs.dialogForm.resetFields()
        this.dialogForm = this.$options.data().dialogForm
        return false
      },

      handleChange({ file }) {
        console.log('file-----', file)
      },
      beforeUpload(file) {
        const isJpgOrPng =
          file.type === 'image/jpeg' ||
          file.type === 'image/jpg' ||
          file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传图片不能超过2M')
        }
        return isJpgOrPng && isLt2M
      },
      uploadAvatar(file) {
        console.log('uploadAvatar ----file---------', file)
        this.imgType = file.file.type.split('/')[1]
        getBase64(file.file, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
          //处理base64图片头
          this.imgStr = imageUrl.split(',')[1]
        })
      },
      handleImg(code) {
        if (code == 'scale') {
          if (this.scale > 3) {
            return
          }
          this.scale = this.scale + 0.5
          this.$refs.upImg.style.transform = `scale(${this.scale})`
        } else if (code == 'reduce') {
          if (this.scale == 0.5) {
            return
          }
          this.scale = this.scale - 0.5
          this.$refs.upImg.style.transform = `scale(${this.scale})`
        } else {
          this.rotate = this.rotate + 90
          this.$refs.upImg.style.transform = `rotate(${this.rotate}deg)`
        }
      },
    },
  }
</script>
<style lang="less" scoped>
  .avatar-uploader {
    /deep/ .ant-upload.ant-upload-select-picture-card > .ant-upload {
      padding: 0;
    }
  }
  .uploadDialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 360px;
    overflow: hidden;
    cursor: pointer;
    background: #f7f7f7;
    border: 1px solid #ededed;
    border-radius: 4px;
    .imageUrl {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .addicon {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
      }
    }
    .tips {
      width: 252px;
      margin-top: 5px;
      font-size: 14px;
      color: #999;
    }
  }

  .avatarTranForm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 360px;
    > span {
      font-size: 14px;
      color: #47ba8e;
      cursor: pointer;
    }
    .iconop {
      img {
        width: 16px;
        height: 16px;
        margin-left: 14px;
        cursor: pointer;
      }
    }
  }
</style>
